<template>
  <div class="allCalss">
    <!-- 顶部显示 -->
    <div class="topMassage">
      <img src="/navigation/img12.png" alt="" />
      <span>四川酒店通商家管理</span>
    </div>
    <div
      :class="{
        centerClass: picDisplay == '1' || picDisplay == '3',
        centerClassTwo: picDisplay == '2',
      }"
    >
      <!-- 步骤条 -->
      <div class="stepClass">
        <div class="divClass">
          <div class="div1Calss comClass" v-if="picDisplay == '1' || picDisplay == '2' || picDisplay == '3'">
            酒店资料
          </div>
          <div class="div2Calss comClass" v-if="picDisplay == '1'">签约信息</div>
          <div class="div4Calss comClass" v-if="picDisplay == '2' || picDisplay == '3'">签约信息</div>
          <div class="div3Calss comClass" v-if="picDisplay == '1' || picDisplay == '2'">结算信息</div>
          <div class="div5Calss comClass" v-if="picDisplay == '3'">结算信息</div>
        </div>
      </div>
      <!-- 详细步骤内容 -->
      <div class="firstStep" v-if="picDisplay == '1'">
        <!-- 基础信息 -->
        <div class="pageViewBox">
          <div class="titleTop">基础信息</div>
          <div class="mainMassageBox">
            <JDForm :propFormVal="allData" :formLabel="allDataText.jcxxText" :option="optionVal"></JDForm>
          </div>
        </div>
        <!-- 图片信息 -->
        <div class="pageViewBox">
          <div class="titleTop">图片信息</div>
          <div class="mainBox">
            <!-- 门头照 -->
            <div class="picClass">
              <div class="picDoorClass">酒店门头照片</div>
              <div class="divSpanCalss">
                <span class="s1" v-for="(item, i) in textData1" :key="`a${i}`">{{ item }}</span>
              </div>
              <div class="imgClass">
                <div class="uploadClass">
                  <el-upload
                    action="http://47.113.222.208:19000/common/minio/uploadImgGetName"
                    list-type="picture-card"
                    :on-success="upSuccess"
                    :before-upload="upBefore"
                    :on-remove="picHandleRemove"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="isible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                </div>
                <!-- 图片展示 -->
                <div>
                  <image-com class="picClass"></image-com>
                </div>
              </div>
            </div>
            <!-- 大厅照 -->
            <div class="picClass">
              <div class="picDoorClass">酒店大厅照片</div>
              <div class="divSpanCalss">
                <span class="s1" v-for="(item, i) in textData2" :key="`a${i}`">{{ item }}</span>
              </div>
              <div class="imgClass">
                <div class="uploadClass">
                  <el-upload
                    action="http://47.113.222.208:19000/common/minio/uploadImgGetName"
                    list-type="picture-card"
                    :on-success="upSuccess"
                    :before-upload="upBefore"
                    :on-remove="picHandleRemove"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="isible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                </div>
                <!-- 图片展示 -->
                <div>
                  <image-com class="picClass"></image-com>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 营业执照信息 -->
      <div class="sconedSetp" v-if="picDisplay == '2'">
        <div class="pageViewBox">
          <div class="titleTop">营业执照信息</div>
          <div class="mainMassageBox">
            <JDForm class="yyzz" :propFormVal="allData" :formLabel="allDataText.yyzzText" :option="optionVal"></JDForm>
          </div>
        </div>
      </div>
      <!-- 补充资质 -->
      <div class="sconedSetp" v-if="picDisplay == '2'">
        <div class="pageViewBox">
          <div class="titleTop">补充资质信息</div>
          <div class="mainMassageBox">
            <JDForm class="bczz" :propFormVal="allData" :formLabel="allDataText.bczzText" :option="optionVal"></JDForm>
          </div>
        </div>
      </div>
      <!-- 签约资质信息 -->
      <div class="sconedSetp" v-if="picDisplay == '2'">
        <div class="pageViewBox">
          <div class="titleTop">签约资质信息</div>
          <div class="mainMassageBox">
            <JDForm class="qyzz" :propFormVal="allData" :formLabel="allDataText.qyzzText" :option="optionVal"></JDForm>
          </div>
        </div>
      </div>
      <!-- 结算信息 -->
      <div class="sconedSetp" v-if="picDisplay == '3'">
        <div class="pageViewBox">
          <div class="titleTop">结算收款信息</div>
          <div class="mainMassageBox">
            <JDForm class="qyzz" :propFormVal="allData" :formLabel="allDataText.jsxxText" :option="optionVal"></JDForm>
          </div>
        </div>
      </div>
      <!-- 申请情况 -->
      <div class="lastSetp" v-if="picDisplay == '4'">
        <div class="selectClass" v-if="pass == '1'">
          <img src="/login/image12.png" alt="" />
          <span class="s1">申请已提交</span>
          <span class="s2">后台将在1~3个工作日进行审核，请耐心等待~</span>
        </div>
        <div class="selectClass" v-if="pass == '2'">
          <img src="/login/image12.png" alt="" />
          <span class="s1">后台审核中</span>
          <span class="s2"> 后台将在1~3个工作日进行审核，请耐心等待~</span>
        </div>
        <div class="selectClass" v-if="pass == '3'">
          <img src="/login/image13.png" alt="" />
          <span class="s1">审核已通过</span>
          <span class="s2"> 你的入驻信息平台已审核通过，现在您可以通过客户管理系统上传酒店房型</span>
          <button class="enter">立即进入</button>
        </div>
        <div class="selectClass" v-if="pass == '4'">
          <img src="/login/image11.png" alt="" />
          <span class="s1">审核未通过</span>
          <span class="s2"> 失败原因：</span>
          <button>返回修改</button>
        </div>
      </div>
    </div>
    <!-- 下一步按钮 -->
    <div class="btn">
      <button @click="changePage" v-if="picDisplay == '1'">下一步</button>
      <button class="btn2" @click="changePageTwo" v-if="picDisplay == '2'">下一步</button>
      <button class="btn3" @click="changePagethird" v-if="picDisplay == '3'">提交审核</button>
    </div>
  </div>
</template>
<script>
import ImageCom from "@/components/imageCom.vueom.vue'";
import optionVal from './selectOption';
import { allData, allDataText } from './index';
import JDForm from '@/components/JDForm.vue';
export default {
  components: {
    JDForm,
    ImageCom,
  },
  data() {
    return {
      optionVal, //所有的枚举值
      allData, //表单所有数据
      allDataText, //表单配置项
      picDisplay: '1', //显示步骤顺序
      textData1: [
        '酒店门头照片需要展示酒店所处的建筑物与完整的酒店正门',
        '·照片支持上传JPG,JPEG,PNG格式',
        '照片不可出现水印，ai合成图及手绘图片，图片大小不超过10M',
      ],
      textData2: [
        '包括酒店大厅及大厅休息区照片',
        '·照片支持上传JPG,JPEG,PNG格式',
        '照片不可出现水印，ai合成图及手绘图片，图片大小不超过10M',
      ],
      isible: false,
      dialogImageUrl: '',
      pass: '1', //申请情况
    };
  },
  methods: {
    //图片上传成功钩子
    upSuccess() {},
    // 图片上传之前钩子
    upBefore() {},
    // 图片移除钩子
    picHandleRemove() {},
    // 改变步骤按钮
    changePage() {
      this.picDisplay = '2';
    },
    //第二个下一步
    changePageTwo() {
      this.picDisplay = '3';
    },
    //第三个下一步
    changePagethird() {
      this.picDisplay = '4';
    },
  },
  mounted() {
    // this.allData.contractMethodType='个人签约'
  },
};
</script>
<style lang="less" scoped>
.allCalss {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: #f5f6f8;
}
.topMassage {
  width: 100%;
  height: 56px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  img {
    width: 19.91px;
    height: 19.91px;
    margin: 16px 0 20px 26px;
  }
  span {
    position: absolute;
    left: 51px;
    top: 13px;
  }
}
.stepClass {
  width: 100%;
  padding-top: 16px;
  margin: 16px 0 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  .divClass {
    display: flex;
    flex-direction: row;
    justify-content: center;
    .comClass {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      padding-left: 16px;
    }
    .div1Calss {
      color: #fff;
      width: 313px;
      height: 72px;
      background-image: url(/public/login/image6.png);
      background-size: 313px 72px;
    }
    .div2Calss {
      color: #4e5969;
      width: 313px;
      padding-left: 32px;
      height: 72px;
      background-image: url(/public/login/image10.png);
      background-size: 313px 72px;
    }
    .div3Calss {
      color: #4e5969;
      width: 313px;
      padding-left: 32px;
      height: 72px;
      background-image: url(/public/login/image7.png);
      background-size: 313px 72px;
    }
    .div4Calss {
      width: 313px;
      padding-left: 32px;
      color: #fff;
      height: 72px;
      background-image: url(/public/login/image8.png);
      background-size: 313px 72px;
    }
    .div5Calss {
      color: #fff;
      width: 313px;
      padding-left: 32px;
      height: 72px;
      background-image: url(/public/login/image9.png);
      background-size: 313px 72px;
    }
  }
}

.centerClass {
  margin: 0 15%;
  background-color: #fff;
  padding-bottom: 1px;
}
.centerClassTwo {
  margin: 0 15%;
  background-color: #fff;
  padding-bottom: 1px;
  height: 900px;
}

.pageViewBox {
  padding-left: 16px;
  width: calc(100% - 16px);
  .divSpanCalss {
    margin-top: 16px;
    margin-bottom: 26px;
    display: flex;
    flex-direction: column;
    color: #c9cdd4;
    width: 395px;
    height: 66px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #c9cdd4;
    line-height: 22px;
    text-align: left;
  }
}
.imgClass {
  display: flex;
  flex-direction: row;
  margin-bottom: 16px;
}
.btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  button {
    margin-top: 34px;
    width: 260px;
    height: 39px;
    background: #3270ff;
    border-radius: 3px 3px 3px 3px;
    border: none;
    color: #fff;
  }
  .btn2 {
    margin-top: 34px;
    width: 260px;
    height: 39px;
    background: #3270ff;
    border-radius: 3px 3px 3px 3px;
    border: none;
    color: #fff;
  }
}
.selectClass {
  margin-top: 333px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
  }
  .s1 {
    width: 120px;
    height: 32px;
    color: #1d2129;
    font-size: 24px;
  }
  .s2 {
    color: #1d2129;
    font-size: 16px;
  }
  button {
    margin-top: 24px;
    width: 88px;
    height: 32px;
    border: none;
    background: #f93838;
    color: #fff;
    border-radius: 2px 2px 2px 2px;
  }
  .enter {
    margin-top: 24px;
    width: 88px;
    height: 32px;
    border: none;
    background: #3270ff;
    color: #fff;
    border-radius: 2px 2px 2px 2px;
  }
}
:deep .el-upload--picture-card {
  width: 80px !important;
  height: 80px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
:deep .el-upload-list__item,
.is-success {
  width: 80px !important;
  height: 80px !important;
}
:deep .el-form {
  font-size: 14px;
  .demo-uni-row {
    width: 1146px;
    .el-col {
      height: 32px !important;
      margin-bottom: 16px;
      .demo-uni-col {
        .el-form-item {
          .el-form-item__label {
            color: #4e5969;
            width: 110px !important;
            text-align: left;
          }
          .el-form-item__content {
            color: #1d2129;
            width: 350px !important;
            .el-input {
              width: 220px !important;
              height: 32px !important;
            }
          }
        }
      }
    }
  }
}
:deep .yyzz {
  height: 176px;
  margin-bottom: 24px;
  .formCom {
    .el-form {
      font-size: 14px;
      .demo-uni-row {
        .el-col {
          height: 32px !important;
          margin-bottom: 16px;
          .demo-uni-col {
            .el-form-item {
              .el-form-item__label {
                color: #4e5969;
                width: 130px !important;
                text-align: left;
              }
              .el-form-item__content {
                color: #1d2129;
                width: 350px !important;
                .el-input {
                  width: 220px !important;
                  height: 32px !important;
                }
              }
            }
          }
        }
      }
    }
  }
}
:deep .bczz {
  height: 176px;
  margin-bottom: 24px;
  .formCom {
    .el-form {
      font-size: 14px;
      .demo-uni-row {
        .el-col {
          height: 118px !important;
          margin-bottom: 16px;
          .demo-uni-col {
            .el-form-item {
              .topLabel {
                color: #4e5969;
              }
              .el-form-item__label {
                color: #4e5969;
                width: 130px !important;
                text-align: left;
                white-space: wrap;
              }
              .el-form-item__content {
                color: #1d2129;
                width: 350px !important;
                .el-input {
                  width: 220px !important;
                  height: 32px !important;
                }
              }
            }
          }
        }
      }
    }
  }
}
:deep .avatar-uploade {
  width: 80px !important;
  height: 80px !important;
}
:deep .qyzz {
  margin-bottom: 24px;
  padding-bottom: 16px;
  .formCom {
    .el-form {
      font-size: 14px;
      .demo-uni-row {
        .el-col {
          height: 32px !important;
          margin-bottom: 16px;
          .demo-uni-col {
            .el-form-item {
              .el-form-item__label {
                color: #4e5969;
                width: 130px !important;
                text-align: left;
              }
              .el-form-item__content {
                color: #1d2129;
                width: 350px !important;
                .el-input {
                  width: 220px !important;
                  height: 32px !important;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
